<template>
  <el-form
    ref="form"
    :model="form"
    :rules="rules"
    label-width="100px"
    class="mainpage"
  >
    <div class="nameAndSex">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="form.sex"></el-input>
      </el-form-item>
    </div>
    <el-form-item label="拼桌人数" prop="compositeTable">
      <el-select v-model="form.compositeTable" placeholder="请选择人数">
        <el-option
          v-for="item of peopleCount"
          :lable="item.value"
          :value="item.num"
          :key="item.num"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="菜系">
      <el-select v-model="form.cuisine" placeholder="请选择菜系">
        <el-option
          v-for="item of cuisineList"
          :lable="item.cuisine"
          :value="item.id"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="期待话题">
      <el-select
        v-model="form.expectedTopic"
        placeholder="话题最多选择4个"
        multiple
        :multiple-limit="4"
      >
        <el-option
          v-for="item of topics"
          :lable="item.topic"
          :value="item.topic"
          :key="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号码" prop="phoneNum">
      <el-input v-model="form.phoneNum" class="phoneNum"></el-input>
    </el-form-item>
    <el-form-item label="喜好">
      <el-input type="textarea" :rows="2" v-model="form.hobby"> </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit('form')">立即预约</el-button>
      <el-button @click="resetForm('form')">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "Reservation",
  data() {
    return {
      form: {
        name: "",
        sex: "",
        hobby: "",
        compositeTable: "",
        cuisine: "",
        expectedTopic: [],
        phoneNum: "",
      },
      peopleCount: [
        {
          num: 1,
          value: "1人",
        },
        {
          num: 2,
          value: "2人",
        },
        {
          num: 3,
          value: "3人",
        },
      ],
      topics: [
        {
          id: 1,
          topic: "篮球",
        },
        {
          id: 2,
          topic: "足球",
        },
        {
          id: 3,
          topic: "羽毛球",
        },
        {
          id: 4,
          topic: "桌球",
        },
        {
          id: 5,
          topic: "。。。",
        },
      ],
      cuisineList: [
        {
          id: 1,
          cuisine: "川菜",
        },
        {
          id: 2,
          cuisine: "湘菜",
        },
        {
          id: 3,
          cuisine: "鲁菜",
        },
        {
          id: 4,
          cuisine: "粤菜",
        },
        {
          id: 5,
          cuisine: "浙菜",
        },
        {
          id: 6,
          cuisine: "徽菜",
        },
        {
          id: 7,
          cuisine: "苏菜",
        },
        {
          id: 8,
          cuisine: "东北菜",
        },
      ],
      rules: {
        name: [
          {
            required: true,
            message: "请输入您的名字",
            trigger: "blur",
          },
        ],
        sex: [
          {
            required: true,
            message: "请输入您的性别",
            trigger: "blur",
          },
        ],
        phoneNum: [
          {
            required: true,
            message: "请输入您的手机号",
            trigger: "blur",
          },
        ],
        compositeTable: [
          {
            required: true,
            message: "请输入您的拼桌数量",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit(formName) {
      console.log(this.$refs[formName].validate);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("提交:", this.form);
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  computed: {},
};
</script>
<style scoped>
.mainpage {
  width: 80%;
  margin: 0 auto;
  margin-top: 10px;
}
.nameAndSex {
  display: flex;
}
.name .sex {
  width: 20%;
}
.phoneNum {
  width: 60%;
}
</style>